<template>
  <div class="register_container">
    <div class="register_box">
      <h1>注册系统</h1>
      <el-form
        ref="registerRulesRef"
        :rules="rules"
        :model="adminInfo"
        class="register_form"
      >
        <el-form-item prop="email" class="email">
          <el-input
            type="text"
            autocomplete="off"
            v-model="adminInfo.email"
            placeholder="请输入邮箱"
            prefix-icon="iconfont icon-youxiang"
          ></el-input>
          <button
            :disabled="!isCanSendCode"
            class="code"
            type="primary"
            icon="el-icon-message"
            @click="sendCode"
          >
            {{ message }}
          </button>
        </el-form-item>
        <el-form-item prop="adminname">
          <el-input
            type="text"
            autocomplete="off"
            v-model="adminInfo.adminname"
            placeholder="请输入账号"
            prefix-icon="iconfont icon-yonghuming"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            type="password"
            autocomplete="off"
            v-model="adminInfo.password"
            placeholder="请输入密码"
            prefix-icon="iconfont icon-mima"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            type="text"
            autocomplete="off"
            v-model="adminInfo.code"
            placeholder="请输入验证码"
            prefix-icon="iconfont icon-yanzhengma"
          ></el-input>
        </el-form-item>
        <div class="btn">
          <el-button type="primary" @click="submitForm()">注册</el-button>
          <el-button @click="resetForm">重置</el-button>
        </div>
        <div class="login">
          <router-link to="/login">这里登录?</router-link>如果你已有一个账号
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
let timer = "";
export default {
  data() {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      isCanSendCode: true,
      message: "发送验证码",
      adminInfo: {
        email: "hzh3313749060@163.com",
        adminname: "",
        password: "",
        code: "",
      },

      rules: {
        email: [{ validator: checkEmail, trigger: "blur" }],
        adminname: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 5, max: 5, message: "长度在 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async submitForm() {
      const res  = await this.$http.post('/admin/register',{
        email:this.adminInfo.email,
        adminname:this.adminInfo.adminname,
        password:this.adminInfo.password,
        code:this.adminInfo.code
      })
      console.log(res,"我是注册之后的返回值")
      if(res.data.flag == true){
        this.$message.success(res.data.msg)
        this.$router.push('/login')
      }else{
        return this.$message.error(res.data.msg)
      }
    },
    resetForm() {
      this.$refs.registerRulesRef.resetFields();
    },
    setTimeInterval() {
      let time = 60;
      timer = setInterval(() => {
        time--;
        this.isCanSendCode = false;
        this.message = time + "s";
        if (time <= 0) {
          this.isCanSendCode = true;
          this.message = "重新获取";
          clearInterval(timer);
        }
      }, 800);
    },
    // 发送验证码
    async sendCode() {
      this.setTimeInterval();
      const res = await this.$http.post("/admin/getValidCode",{
        email:this.adminInfo.email
      });
      console.log(res,"发送验证码成功")
    },
  },
};
</script>

<style scoped>
.register_container {
  background: url("../assets/beijing.jpg") no-repeat;
  background-size: 100%;
  width: 100%;
  height: 930px;
  text-align: center;
}
.register_form {
  padding-top: 15px;
  position: relative;
}
.register_box {
  width: 500px;
  height: 500px;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.register_box h1 {
  color: rgb(191, 192, 191);
}
/* 点击之后的颜色 */
.router-link-active {
  text-decoration: none;
  color: yellow;
}
/* router-link 点击之前的颜色和去掉下划线 */
a {
  text-decoration: none;
  color: pink;
}
.btn {
  padding: 15px 0;
}
.code {
  position: absolute;
  top: 30%;
  right: 2%;
  border: none;
  background: none;
  color: #205592;
  cursor: pointer;
}
</style>